import React, { ChangeEvent, useState } from "react";
import { Accordion, Button, Container, Dropdown, Form, ListGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
import constants from "../../../../constants";
import { QuestionCircle } from "react-bootstrap-icons";
import ScatterPlot, { ScatterGraphItem } from "./ScatterPlot";
import ReadFromExcel from "./ReadFromExcel";

const AIDataSources = {
   uploadfile:"uploadfile",
   onlinefile:"onlinefile",
   webapi: "webapi",
   database: "database"
}

const Analyze:React.FC = (props,state)=> {

    const [inputKey,setInputKey] = useState<string|null>()

    const tooltip = (<Tooltip>Only below ways.</Tooltip>)

    const onSelect= (eventKey: string | null, e: React.SyntheticEvent<unknown>)=>{
        console.log(eventKey)
        setInputKey(eventKey)
    }

    const getAddDataSourceTitle = ()=> {
        var title = ""
        switch(inputKey){
            case AIDataSources.uploadfile:{
                title = constants.str.ai.datasource.uploadLocalFile;
            }
            break;
            case AIDataSources.onlinefile:{
                title = constants.str.ai.datasource.inputFileUrl;
            }
            break;
            case AIDataSources.webapi:{
                title = constants.str.ai.datasource.fromWebApi;
            }
            break;
            case AIDataSources.database:{
                title = constants.str.ai.datasource.fromDataBase;
            }
            break;
            default:
                title = "Choose a way to add datasource"
        }
        return title;
    }

    const plotItems = [
                        new ScatterGraphItem({xs:[1,3,5,7,9],ys:[2,4,6,8,10],name:"a"}),
                        new ScatterGraphItem({xs:[33,22,12,3,0,9],ys:[0,1,2,3,4,5],name:'b'}),
                        new ScatterGraphItem({xs:[123,50,9,23,0,19],ys:[10,111,23,31,44,52],name:"c"})
                    ]

    return <Container fluid className="p-0">
                <Accordion>
                    <Accordion.Item eventKey="adddatasource">
                        <Accordion.Header>
                            <p>Add Data Source&nbsp;
                            <OverlayTrigger delay={{show:800,hide:400}} placement="top" overlay={tooltip}>
                                <QuestionCircle/>
                            </OverlayTrigger>
                            </p>
                        </Accordion.Header>
                        <Accordion.Body>
                            <div>
                                <Dropdown onSelect={onSelect}>
                                    <Dropdown.Toggle>{getAddDataSourceTitle()||"Choose a way to add datasource"}</Dropdown.Toggle>
                                    <Dropdown.Menu>
                                        <Dropdown.Item eventKey={AIDataSources.uploadfile} >{constants.str.ai.datasource.uploadLocalFile}</Dropdown.Item>
                                        <Dropdown.Item eventKey={AIDataSources.onlinefile} >{constants.str.ai.datasource.inputFileUrl}</Dropdown.Item>
                                        <Dropdown.Item eventKey={AIDataSources.webapi} >{constants.str.ai.datasource.fromWebApi}</Dropdown.Item>
                                        <Dropdown.Item eventKey={AIDataSources.database}>{constants.str.ai.datasource.fromDataBase}</Dropdown.Item>
                                    </Dropdown.Menu>
                                </Dropdown>
                            </div>
                            <br/>
                            {inputKey === AIDataSources.uploadfile && (<ReadFromExcel />)}
                            {inputKey === AIDataSources.onlinefile && <Form.Control type='input'></Form.Control>}
                            {inputKey === AIDataSources.webapi && (<div>webapi source related</div>)}
                            {inputKey === AIDataSources.database && (<div>database source related</div>)}
                        </Accordion.Body>
                    </Accordion.Item>
                    <Accordion.Item eventKey="plot">
                        <Accordion.Header><p>Plot the scatter(should support mark exception values)</p></Accordion.Header>
                        <Accordion.Body>
                            <ScatterPlot data={plotItems}></ScatterPlot>
                        </Accordion.Body>
                    </Accordion.Item>
                    <Accordion.Item eventKey="edit">
                        <Accordion.Header><p>Edit or Remove the exception values</p></Accordion.Header>
                        <Accordion.Body></Accordion.Body>
                    </Accordion.Item>
                    <Accordion.Item eventKey="preview">
                        <Accordion.Header><p>Preview Data</p></Accordion.Header>
                        <Accordion.Body></Accordion.Body>
                    </Accordion.Item>
                </Accordion>
                <br/>
    </Container>
}

export default Analyze;